var flow = document.querySelectorAll(".flow");
console.log(flow);
var first_left_div = document.querySelectorAll(".first_left>div");

first_left_div.forEach((item,index) =>{
    item.addEventListener("mouseenter",()=>{
        flow[index].style.display = "flex"
    })
    item.addEventListener("mouseleave",()=>{
        flow[index].style.display = "none"
    })  
})


var banner_index=1;
var banner = document.querySelector(".banner");
var banner_img = banner.querySelectorAll("img");
var banner_span = banner.querySelectorAll("span");
function slide(n){
    // 初始化
   for(let i=0;i<banner_img.length;i++){
    banner_img[i].style.display = 'none';
    banner_span[i].className = "";
   }
   if(banner_index<1){banner_index=banner_img.length};
   if(banner_index>banner_img.length){banner_index=1};
   banner_img[banner_index-1].style.display = "block";
   banner_span[banner_index-1].className = "active";
}
function banner_p(n){
    slide(banner_index+=n);
}
function banner_span_click(n){
    slide(banner_index=n)
}

slide(banner_index);

// auto,slide;

var timer = null;

function auto(){
    if(!timer){
        timer = setInterval(() => {
            banner_index++;
            slide(banner_index);
        }, 2000);
    }
}

timer = setInterval(() => {
    banner_index++;
    slide(banner_index);
}, 2000);

banner.addEventListener("mouseenter",()=>{
    clearInterval(timer)
    timer = null
}
)
banner.addEventListener("mouseleave",()=>{
    auto()
})



// second

var second_body_div = document.querySelectorAll(".second_body");

var second_head_p = document.querySelectorAll(".second_head>p");

second_head_p.forEach((item,index)=>{
    item.addEventListener("mouseenter",()=>{
        for(let i=0;i<second_body_div.length;i++){
            second_body_div[i].style.display = "none"
            second_head_p[i].classList.remove("active")
        }
        second_body_div[index].style.display = "flex"
        second_head_p[index].classList.add("active")
    })
})

// third
var third = document.querySelector(".third");
var third_body = document.querySelectorAll(".third_body")
var third_body_box = document.querySelector(".third_body_box");
var third_width =  parseInt(getComputedStyle(third).width);

third_body.forEach(item=>{
    item.style.width = parseInt(getComputedStyle(third).width)+"px"
    console.log(getComputedStyle(third).width);
})

var third_span = document.querySelector(".third_span");

var third_span = third_span.querySelectorAll("span");

var third_index= 1;
third_span.forEach((item,index)=>{

    item.addEventListener("mouseenter",()=>{
        for(let i =0;i<third_span.length;i++){
            third_span[i].classList.remove("active");
        }
        third_index=index;
        third_body_box.style.left = -index*third_width+"px";
        third_span[index].classList.add("active")
    })
})


